<template>
    <div class="box">
        <header>
            <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
                <template #right>
                    <van-icon name="more-o" size="20" />
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div>
                <img :src="detailInfo.image" style="width:100%">
            </div>
            <div style="color:red;font-size:20px"> ￥ {{ detailInfo.price }}</div>
            <div>{{ detailInfo.title }}</div>
        </div>



    </div>
    <footer class="footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" :badge="totalCount" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="toCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
</template>
<script>
import request from '@/utils/request.js'
import { mapMutations, mapGetters } from 'vuex'
export default {
    data() {
        return {
            showShare: false,
            detailInfo: {},
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                // { name: '分享海报', icon: 'poster' },
                // { name: '二维码', icon: 'qrcode' },
            ]
        }
    },
    created() {
        console.log(this.$route.params.id, '0000')
        request.get('/detail', {
            params: {
                id: this.$route.params.id
            }
        }).then(res => {
            this.detailInfo = res.data.data
        })
    },
    computed: {
        ...mapGetters(['totalCount'])
    },
    methods: {
        ...mapMutations(['addItem']),
        onClickLeft() {
            this.$router.back()
        },
        onClickRight() {
            this.showShare = true
        },
        toCart() {
            // 需要验证是否登录
            if (localStorage.getItem('token')) {
                // 已登录，可以加入到购物车，徽标+1
                console.log('已登录')
                // 这个商品已经在购物车中，那点击时应该是 数量+1
                // 没有在购物车，就加入购物车  cartList
                // vuex中数据做修改，只能在mutations
                this.addItem(this.detailInfo)
            } else {
                // 未登录，跳转到登录页面
                this.$router.push('/login')
            }

        }
    }
}
</script>
<style lang="scss" scoped></style>